<template>
	<view class="userlist">
		<view class="list">
			<view v-for="(item,idx) in list" :key="idx" class="user">
				<view class="tn-flex tn-flex-col-top" @click="userclick(item)">
					<view class="tn-shadow-blur">
						<image v-if="item.face" class="avatar" :src="item.face" mode="aspectFill">
						</image>
						<view v-else class="avatar">{{item.username.substr(-2)}}</view>
					</view>
					<view class="tn-padding-left-sm">
						<view class="tn-text-bold">
							{{item.username}}
						</view>
						<view class=" tn-padding-top-xs">
							毛发编号：{{item.mfid}}
						</view>
						<view class=" tn-padding-top-xs" v-if="mfjc || mfbj">
							提取期数：{{item.tqqs}}
						</view>
						<view class=" tn-padding-top-xs">
							性别：{{item.xb}}
						</view>
						<view class=" tn-padding-top-xs">
							身份证号：{{item.sfz}}
						</view>
						<view class=" tn-padding-top-xs" v-if="item.gsxz">
							管控乡镇：{{item.gsxz}}
						</view>
						<view class=" tn-padding-top-xs" v-if="item.gssg">
							管控社工：{{item.gssg}}
						</view>
						<view class=" tn-padding-top-xs" v-if="item.fcfl &&fjfl">
							分级分类：{{item.fcfl}}
						</view>
						<view class=" tn-padding-top-xs" v-if="item.ryzt">
							人员状态：{{item.ryzt}}
						</view>
						<view class=" tn-padding-top-xs" v-if="rwzq">
							任务周期：<text class="fontmin">{{item.csksnext}}至{{item.csjsend}}</text>
						</view>
						<view class=" tn-padding-top-xs " v-if="mfjc">
							任务周期：<text class="fontmin">{{item.kstime}}至{{item.duetime}}</text>
						</view>
						<view class=" tn-padding-top-xs " v-if="wtzq">
							委托周期：<text class="fontmin">{{item.trusteetime}}至{{item.duetime}}</text>
						</view>
						<view class=" tn-padding-top-xs " v-if="wtzq">
							受托乡镇：<text class="fontmin">{{item.trustee}}</text>
						</view>
						<view class=" tn-padding-top-xs " v-if="tjzq">
							体检周期：<text class="fontmin">{{item.csksnext}}至{{item.csjsend}}</text>
						</view>
						<template v-if="zm">
							<view class=" tn-padding-top-xs" v-if="item.gsxz">
								罪名：{{item.zm}}
							</view>
							<view class=" tn-padding-top-xs" v-if="item.gsxz">
								周期开始：{{item.kssj}}
							</view>
							<view class=" tn-padding-top-xs" v-if="item.gsxz">
								周期结束：{{item.jssj }}
							</view>
						</template>
						<!-- isqrcode{{item.isqrcode}} -->
						
						<!-- 2.委托周期（client里的开始日期trusteetime（转换成YYYY-MM-DD格式）、结束日期duetime） -->
						<!-- 3.待毛发  姓名、毛发编号、提取期数（tqqs）、管控乡镇、管控社工、分级分类、人员状态、任务周期（mfjc里的开始日期kstime、结束日期duetime），毛发录入页面，最上方显示姓名（username）、毛发编号（mfid），管控乡镇（gsxz）. -->
						<!-- 5.待补检  姓名、毛发编号、提取期数（tqqs）、管控乡镇、管控社工、分级分类、人员状态 -->
					</view>
				</view>
				<view class="usertag tn-flex tn-margin-top-sm" v-if="item.tag&&item.tag.length>0">
					<view class="tn-margin-right-xs tn-margin-bottom-xs" v-for="(mtag,midx) in item.tag" :key="midx">
						<tn-tag backgroundColor="#ff5500" fontColor="#fff" shape="radius">{{mtag}}</tn-tag>
					</view>
				</view>
			</view>
			<tn-empty v-if="listlength" class="error" :icon="icon" :mode="issearch ?'search':'data'"></tn-empty>
			
			<view class="tn-padding-bottom"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "userlist",
		data() {
			return {}

		},
		

		components: {
			
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			rwzq:{
				type: Boolean,
				default () {
					return false
				}
			},
			wtzq:{
				type: Boolean,
				default () {
					return false
				}
			},
			mfjc:{
				type: Boolean,
				default () {
					return false
				}
			},
			mfbj:{
				type: Boolean,
				default () {
					return false
				}
			},
			fjfl:{
				type: Boolean,
				default () {
					return true
				}
			},
			tjzq:{
				type: Boolean,
				default () {
					return false
				}
			},
			zm:{
				type: Boolean,
				default () {
					return false
				}
			},
			issearch:{
				type: [Boolean,Object],
				default () {
					return false
				}
			},
			
		},

		created() {

		},
		mounted() {

		},
		computed:{
			listlength(){
				
				if(this.list.length>0){
					return false
				}else{
					return true
				}
				
			},
			icon(){
				if(this.issearch){
					return '/static/error/secarch.png'
				}else{
					return '/static/error/common.png'
				}
			}
		},
		beforeDestroy() {
			// this.reset();
		},
		methods: {
			userclick(item){
				this.$emit('userclick',item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.userlist {
		padding-top: 10rpx;
		position: relative;

		.user {
			position: relative;
			margin: 20rpx;
			padding: 36rpx 26rpx;
			border-radius: 15rpx;
			background-color: #fff;
			box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.07);
		}

		.usertag {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			display: flex;
			width: 400rpx;
			flex-wrap: wrap;
			justify-content: flex-end;
		}
		.fontmin{
			font-size: 30rpx;
		}
	}
</style>